<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin:0px;
        }
        div{
            width:250px;
            margin-top:20px;
            margin-left: 30px;

        }
        p{
            height:50px;
            line-height: 50px;
            text-indent: 5px;
        }

        span{
            display: inline-block;
            width:120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }
        span:last-child{
            text-align: right;
        }

    </style>
</head>
<body>

    <div id="container">
        
    </div>
    <script>
         var arrs=["平凡的世界","穆斯林的葬礼","挪威的森林","破碎的四月","汤姆叔叔的小屋","呼啸山庄","白鹿原","苏菲的世界","生命从明天开始","尘埃落定","傲慢与偏见"];
        var oldStyle;
        var container=document.getElementById("container");//获取父容器的DOM对象
        for(var i=0;i<arrs.length;i++){

            //创建的p元素
            var p=document.createElement("p");
            if(i%2==0){//奇数行
                p.style.background="pink";
            }else{
                p.style.background="yellow";
            }

            //希望将两个span标签放置在p标签中
            var span1=document.createElement("span");
            var num="0"+(i+1);
            if(i>=9){
                num=i+1;
            }
            span1.innerHTML=num+"."+arrs[i];
            var span2=document.createElement("span");
            span2.innerHTML=">";

            //将span追加到p标签中去
            p.appendChild(span1);
            p.appendChild(span2);

            container.appendChild(p);

            p.onmouseover=function(){
                oldStyle=this.style.background;//记录当前p原来的背景颜色
                this.style.background="yellowgreen";//给当前行的p设置新的背景颜色
            };
            p.onmouseout=function(){
                this.style.background=oldStyle;//恢复到之前的背景颜色
            };



        }


    </script>
</body>
</html>